<template>
    <div class="layout">
        <div class="layout_header">
            <com-header></com-header>
        </div>
        <div class="nav_view">
            <div class="nav">
                <van-tabs v-model:active="active">
                    <van-tab title="商品" to="/home/goods" name="/home/goods"></van-tab>
                    <van-tab title="评价" to="/home/ratings" name="/home/ratings"></van-tab>
                    <van-tab title="商家" to="/home/shop" name="/home/shop"></van-tab>
                </van-tabs>
            </div>
            <div class="two_view">
                <router-view></router-view>
            </div>
            <van-submit-bar :price="total.totalMoney" button-text="提交订单">
                <!-- 图标 -->
                <van-icon name="cart-o" :badge="total.totalCount" @click="show = !show" color="#1989fa" />
            </van-submit-bar>
            <!-- 弹出层 -->
            <!-- closeable是左上角的xx，round是圆角 :close-on-click-overlay="false"控制遮罩层的点击事件 -->
            <van-popup v-model:show="show" position="bottom" closeable round :close-on-click-overlay="false"
                :style="{ height: '60%' }">
               <div v-for="child in cartlist" :key="child.id">
                        <van-card :price="child.price" :title="child.name" :thumb="child.imgUrl" :desc="child.goodsDesc"
                        
                           >
                            <template #footer>

                                    <div>
                                        <van-button size="mini" @click="addsub('+',child.id)">+</van-button>
                                        {{cartCount(child.id)}}
                                        <van-button size="mini" @click="addsub('-',child.id)">-</van-button>
                                    </div>
                            </template>
                        </van-card>
                    </div>
            </van-popup>

        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ComHeader from '../../components/comheader/index.vue';
import cardMixin from '../../mixins/cardMixin';
export default defineComponent({
    components: {
        ComHeader
    },
    setup() {
        let active = ref("/home/goods");
        const route = useRoute();
        watch(route, () => {
            active.value = route.path;
        }, {
            deep: true,
            immediate: true
        })
        let show = ref(false);
        let { total, cartlist, addsub,cartCount } = cardMixin();

        return { active, total, cartlist, addsub, show,cartCount }
    }
})
</script>

<style lang="scss" scoped>
.layout {
    height: 100%;

    .layout_header {
        height: 200px;
    }

    .nav_view {
        height: calc(100% - 200px);
        display: flex;
        flex-direction: column;

        ::v-deep(.van-submit-bar) {
            border-radius: 50px;
            background-color: #FEC244;
            bottom: 15px;
            z-index: 999999;


        }
    }

    ::v-deep(.van-icon-cart-o) {
        font-size: 28px;
    }

    ::v-deep(.van-badge) {
        font-size: 15px;
    }

    .nav {
        flex: 0 0 50px;
    }

    .two_view {
        border: 1px solid;
        flex: 1;
        overflow: hidden;
    }
}
</style>